<!DOCTYPE html>
<html><head>
        <title>Meandros</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css'></link>
        <link media="screen" type="text/css" href="css/cssBase.css" rel="stylesheet"/>
        <style>
            body {
                margin: 0px;
                padding: 0px;
                overflow: hidden;
                background: black;
                font-family: 'Terminal Dosis', sans-serif;
            }
            h1{color: black;


            }

            #myCanvas {
                border: none;
            }
            .barraInferior{
                color: whitesmoke;
                position: absolute;
                bottom: 0px;
                height: 30px;
                width: 100%;
                background-color: black;


            }
        </style>
        <script src="js/kinetic2d-v1.js">
        </script>
        <script src="js/conflicto.js">
        </script>

    </head>
    <body style="cursor: default;" onmousedown="return false;">

        <div id="fichaLugares" style="display: none; color: antiquewhite; width: 850px; padding: 10px; top:100px; left:100px; position: absolute; background-image: url('imagenes/fondoFichas.png')" >

            <div style="position: absolute; right: 0px; top: 0px;">
                <img onclick="mostrar('fichaLugares');" src="imagenes/cerrar.png"/>
            </div>
            <div style="position: absolute; right: 0px; color: black; top: 80px; width: 530px; height: 200px; overflow:auto; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula ligula quis tellus gravida quis condimentum sapien consequat. Proin auctor velit a sapien vulputate cursus. Duis malesuada rhoncus risus eget rutrum. Quisque arcu turpis, scelerisque non iaculis sit amet, imperdiet a lacus. Vivamus ultrices cursus ligula, in eleifend felis tempor ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae bibendum tellus.
                <br />
                Sed porta vehicula ornare. Maecenas vitae erat sit amet eros convallis pellentesque ac eu ipsum. Sed porta fringilla odio, eget aliquam sapien aliquam consequat. Vestibulum ultrices sodales cursus. Praesent ac arcu lectus, in egestas justo. Donec accumsan risus sed ipsum ultricies convallis. Etiam porta scelerisque purus, id imperdiet augue luctus a. Nam porta leo lobortis risus tempus malesuada in ac leo.
                <br />
                Morbi sit amet elit ipsum. Suspendisse nisl odio, suscipit vel dictum eu, ultricies posuere felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non enim ipsum, in semper dui. Etiam aliquam accumsan massa eu elementum. Nulla blandit semper dolor, ac ultrices enim fermentum consectetur. Suspendisse lorem urna, accumsan at sollicitudin vel, molestie in tellus. Curabitur aliquam risus nunc, id euismod elit. Nam eget nisl id purus lacinia elementum. In placerat cursus metus, id ornare turpis ultrices nec. Duis ut felis mauris. Suspendisse potenti. Aenean et tellus lectus.  </div>
            <h1>Lugares</h1>
            <video width="320" height="240" controls="controls">
                <source src="videos/calamar.flv" type="video/flv" />

                Your browser does not support the video tag.
            </video>
        </div>
        <div id="fichaTexto" style="display: none; color: antiquewhite; width: 850px; height: 300px; padding: 10px; top:100px; left:100px; position: absolute; background-image: url('imagenes/fondoFichas.png')" >

            <div style="position: absolute; right: 0px; top: 0px;">
                <img onclick="mostrar('fichaTexto');" src="imagenes/cerrar.png"/>
            </div>
            <div style="position: absolute; right: 0px; color: black; top: 80px; width: 750px; height: 200px; overflow:auto; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula ligula quis tellus gravida quis condimentum sapien consequat. Proin auctor velit a sapien vulputate cursus. Duis malesuada rhoncus risus eget rutrum. Quisque arcu turpis, scelerisque non iaculis sit amet, imperdiet a lacus. Vivamus ultrices cursus ligula, in eleifend felis tempor ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae bibendum tellus.
                <br />
                Sed porta vehicula ornare. Maecenas vitae erat sit amet eros convallis pellentesque ac eu ipsum. Sed porta fringilla odio, eget aliquam sapien aliquam consequat. Vestibulum ultrices sodales cursus. Praesent ac arcu lectus, in egestas justo. Donec accumsan risus sed ipsum ultricies convallis. Etiam porta scelerisque purus, id imperdiet augue luctus a. Nam porta leo lobortis risus tempus malesuada in ac leo.
                <br />
                Morbi sit amet elit ipsum. Suspendisse nisl odio, suscipit vel dictum eu, ultricies posuere felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non enim ipsum, in semper dui. Etiam aliquam accumsan massa eu elementum. Nulla blandit semper dolor, ac ultrices enim fermentum consectetur. Suspendisse lorem urna, accumsan at sollicitudin vel, molestie in tellus. Curabitur aliquam risus nunc, id euismod elit. Nam eget nisl id purus lacinia elementum. In placerat cursus metus, id ornare turpis ultrices nec. Duis ut felis mauris. Suspendisse potenti. Aenean et tellus lectus.  </div>
            <h1>Texto simulado</h1>
            
        </div>
        
        
        <div id="fichaMasacres" style="display: none; color: antiquewhite; width: 850px; padding: 10px; top:100px; left:100px; position: absolute; background-image: url('imagenes/fondoFichas.png')" >

            <div style="position: absolute; right: 0px; top: 0px;">
                <img onclick="mostrar('fichaMasacres');" src="imagenes/cerrar.png"/>
            </div>
            <div style="position: absolute; right: 0px; color: black; top: 80px; width: 530px; height: 200px; overflow:auto; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula ligula quis tellus gravida quis condimentum sapien consequat. Proin auctor velit a sapien vulputate cursus. Duis malesuada rhoncus risus eget rutrum. Quisque arcu turpis, scelerisque non iaculis sit amet, imperdiet a lacus. Vivamus ultrices cursus ligula, in eleifend felis tempor ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae bibendum tellus.
                <br />
                Sed porta vehicula ornare. Maecenas vitae erat sit amet eros convallis pellentesque ac eu ipsum. Sed porta fringilla odio, eget aliquam sapien aliquam consequat. Vestibulum ultrices sodales cursus. Praesent ac arcu lectus, in egestas justo. Donec accumsan risus sed ipsum ultricies convallis. Etiam porta scelerisque purus, id imperdiet augue luctus a. Nam porta leo lobortis risus tempus malesuada in ac leo.
                <br />
                Morbi sit amet elit ipsum. Suspendisse nisl odio, suscipit vel dictum eu, ultricies posuere felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non enim ipsum, in semper dui. Etiam aliquam accumsan massa eu elementum. Nulla blandit semper dolor, ac ultrices enim fermentum consectetur. Suspendisse lorem urna, accumsan at sollicitudin vel, molestie in tellus. Curabitur aliquam risus nunc, id euismod elit. Nam eget nisl id purus lacinia elementum. In placerat cursus metus, id ornare turpis ultrices nec. Duis ut felis mauris. Suspendisse potenti. Aenean et tellus lectus.  </div>
            <h1>Masacres</h1>
            <video width="320" height="240" controls="controls">
                <source src="videos/calamar.flv" type="video/flv" />

                Your browser does not support the video tag.
            </video>
        </div>
        <div id="fichaEnfrentamiento" style="display: none; color: antiquewhite; width: 850px; padding: 10px; top:100px; left:100px; position: absolute; background-image: url('imagenes/fondoFichas.png')" >

            <div style="position: absolute; right: 0px; top: 0px;">
                <img onclick="mostrar('fichaEnfrentamiento');" src="imagenes/cerrar.png"/>
            </div>
            <div style="position: absolute; right: 0px; color: black; top: 80px; width: 530px; height: 200px; overflow:auto; ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula ligula quis tellus gravida quis condimentum sapien consequat. Proin auctor velit a sapien vulputate cursus. Duis malesuada rhoncus risus eget rutrum. Quisque arcu turpis, scelerisque non iaculis sit amet, imperdiet a lacus. Vivamus ultrices cursus ligula, in eleifend felis tempor ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus vitae bibendum tellus.
                <br />
                Sed porta vehicula ornare. Maecenas vitae erat sit amet eros convallis pellentesque ac eu ipsum. Sed porta fringilla odio, eget aliquam sapien aliquam consequat. Vestibulum ultrices sodales cursus. Praesent ac arcu lectus, in egestas justo. Donec accumsan risus sed ipsum ultricies convallis. Etiam porta scelerisque purus, id imperdiet augue luctus a. Nam porta leo lobortis risus tempus malesuada in ac leo.
                <br />
                Morbi sit amet elit ipsum. Suspendisse nisl odio, suscipit vel dictum eu, ultricies posuere felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam non enim ipsum, in semper dui. Etiam aliquam accumsan massa eu elementum. Nulla blandit semper dolor, ac ultrices enim fermentum consectetur. Suspendisse lorem urna, accumsan at sollicitudin vel, molestie in tellus. Curabitur aliquam risus nunc, id euismod elit. Nam eget nisl id purus lacinia elementum. In placerat cursus metus, id ornare turpis ultrices nec. Duis ut felis mauris. Suspendisse potenti. Aenean et tellus lectus.  </div>
            <h1>Combates</h1>
            <iframe width="320" height="240" src="http://www.youtube.com/embed/HshxcZBxcuQ" frameborder="0" allowfullscreen></iframe>
        </div>





        <div id="prueba" style="display: none; color: antiquewhite; top:100px; left:100px; position: absolute; background-image: url('imagenes/fondoFichas.png')" >
            <div style="position: absolute; right: 0px; top: 0px;">
                <img onclick="mostrar('prueba');" src="imagenes/cerrar.png"/>
            </div>
            <img src="imagenes/mapaMundi.png"/></div>
        <div class="menuDer" >
            <ul class="accordion" id="vertical">
                <li class="slide_01">
                    <div class="tituloMenu">Meandros</div>
                    <div style="padding-left: 20px">
                        <span onclick="boleano('lugares')">Lugares</span><br/>
                        <span> Info Documental<br/></span>
                        <div style="padding-left: 30px">
                            Sinopsis<br/>
                            Ficha técnica<br/>
                            Notas del director<br/>
                            Screenings<br/>
                            Agradecimientos<br/>
                            Trailer<br/>
                            Contacto<br/>
                            Descargas<br/></div>
                        Personajes<br/>


                    </div>  
                </li>
                <li class="slide_02">
                    <div class="tituloMenu"> Conflicto Armado</div>
                    <div style="padding-left: 20px">
                        <span onclick="boleano('conflicto')"> Combates</span><br />
                        <div style="padding-left: 30px; display: none;">
                            Toma de Miraflores<br/>
                            Tomachipán<br/>
                            Cachicamo<br/>
                            Choapal<br/>
                            La Paz<br/>
                            Opeación Jaque<br/>
                            Secuestro de Marcos Baquero<br/>
                            Liberación de Marcos Baquero</div>
                        <span onclick="boleano('masacres')">Masacres</span><br/>
                        <div style="padding-left: 30px;display: none;">
                            Mapiripán<br/>
                            Puerto Alvira<br/>
                            La Unilla<br/>
                        </div>
                        Desplazamiento
                        <div style="padding-left: 30px;display: none;">
                            Uno<br/>
                            Dos<br/>
                            Tres<br/>
                        </div>
                    </div>
                </li>
                <li class="slide_03"> <div class="tituloMenu">Coca</div>
                    <div style="padding-left: 20px">   
                        Cultivos<br/>
                        Fumigaciones<br/>
                        Aspecto cultural<br/>

                    </div>




                </li>
                <li class="slide_04"> <div class="tituloMenu">Mosaico cultural</div>
                    <div style="padding-left: 20px">  Comunidades

                    </div>
                </li>
            </ul>


        </div>
        <div class="barraInferior"><img style="float: left; margin-right: 20px;" src="imagenes/logoMeandros.png" /><span onclick="mostrar('fichaTexto');">Meandros</span> <span onclick="mostrar('prueba');">- Ubicación Geográfica</span>  <span onclick="mostrar('fichaTexto');">- Medio de contención - Créditos </span> </div>

        <canvas id="myCanvas">

        </canvas>
        <!-- <div id="scrollContent" >dadasdsd</div>
          </div> -->

        <script>
            var visibleId = new Boolean();
            visibleId = true;
            
            var conflictoB = new Boolean();
            conflictoB = true;
            
            var masacresB = new Boolean();
            masacresB = false;
            
            var lugaresB = new Boolean();
            lugaresB = true;
            
            var rectX = 0;
            var rectY = 0;
            var conflictoIcon = new Image();
            conflictoIcon.src = 'imagenes/logoConflicto.png';
            var masacreIcon = new Image();
            masacreIcon.src = 'imagenes/logoMasacres.png';
              
            var lugIcon = new Image();
            lugIcon.src = 'imagenes/logoAsentamiento.png';
            
            
            function mostrar(id){
                if(visibleId== true){
                    visibleId = false;
                    document.getElementById(id).style.display = 'block';
                }else{
                    visibleId = true;
                    document.getElementById(id).style.display = 'none';            
                }                                
            }
            
            function boleano(variable){
                
                if(variable == 'conflicto'){
                    if(conflictoB== true){
                        conflictoB=false;
                      
                    }else{
                        conflictoB=true;
                    }
                } else if(variable == 'masacres'){
                        
                    if(masacresB== true){
                        masacresB=false;
                      
                    }else{
                        masacresB=true;
                    }
                } else if(variable == 'lugares'){
                        
                    if(lugaresB== true){
                        lugaresB=false;
                      
                    }else{
                        lugaresB=true;
                    }
                }
            }
            
            function iconoConflicto(enX,eny,context2){
                //context.beginPath();
                return  context2.drawImage(conflictoIcon, enX, eny,60 ,48 );
                
            }
            
            function iconoMasacres(enX,eny,context2){
                //context.beginPath();
                return  context2.drawImage(masacreIcon, enX, eny,30 ,30 );
                
            }
            function iconoAsentamientos(enX,eny,context2){
                //context.beginPath();
                return  context2.drawImage(lugIcon, enX, eny,30 ,30 );
                
            }
            
            
            
            //    function drawImage(mapa,anchoV,altoV,rectX,rectY){
            function drawImage(anchoV,altoV){
                var kin = new Kinetic("myCanvas");
                var kin2 =  new Kinetic("myCanvas");
                
                var canvas = kin.getCanvas();
                var context = kin.getContext();
                var context2 = kin2.getContext();
                var anchoImg = 1983;
                var altoImg = 1395;
                var escala = 0;
                var escalaP = 1;
                var delta = 0;

                var draggingRect = false;
                var scalingRect = false;
                var draggingRectOffsetX = 0;
                var draggingRectOffsetY = 0;
                canvas.addEventListener("mouseout", function(){
                    draggingRect = false;
                }, false); 
                context.globalCompositeOperation = "destination-over";
                
                kin.setStage(function(){
                    var mousePos = kin.getMousePos();
                    //draggingRect;
                    this.clear();
                    if(conflictoB ==true){
                        // conflicto(this);
                        for(i =0; i<10; i++){
                            iconoConflicto(rectX+conEnX[i],rectY+conEnY[i],context);
                            this.beginRegion();  
                            context.beginPath();
                            context.rect(rectX+conEnX[i],rectY+conEnY[i], 60, 48);
                            context.closePath(); 
                            this.addRegionEventListener("mouseup", function(){
                                mostrar('fichaEnfrentamiento');
                            });
                            this.closeRegion();
                        }
                    } else{} 
                    
                    if(masacresB ==true){
                        // masacre(this);
                        for(y =0; y<10; y++){
                            iconoMasacres(rectX+masEnX[y],rectY+masEnY[y],context);
                            this.beginRegion();  
                            context.beginPath();
                            context.rect(rectX+masEnX[y],rectY+masEnY[y], 30, 30);
                            context.closePath(); 
                            this.addRegionEventListener("mouseup", function(){
                                mostrar('fichaMasacres');
                            });
                            this.closeRegion();
                        }
                    }else{}
                    if(lugaresB==true){
                        // lugares(this);
                        for(y =0; y<10; y++){
                            iconoAsentamientos(rectX+lugEnX[y],rectY+lugEnY[y],context);
                            this.beginRegion();  
                            context.beginPath();
                            context.rect(rectX+lugEnX[y],rectY+lugEnY[y], 30, 30);
                            context.closePath(); 
                            this.addRegionEventListener("mouseup", function(){
                                mostrar('fichaLugares');
                            });
                            this.closeRegion();
                        }
                    }else{}
                    
                    
                    
                    
                    
                    this.beginRegion();  
                    context.drawImage(mapa, rectX, rectY, anchoImg/escalaP, altoImg/escalaP);                    
                 
                    if (draggingRect) {
                        rectX = mousePos.x - draggingRectOffsetX;
                        rectY = mousePos.y - draggingRectOffsetY;
                 
                    }else{
                        if(rectX >0){
                            rectX = 0;
                        
                        } 
                        if(rectY >0){
                            rectY = 0;
                        }
                        if(rectY <-(1395-altoV)){
                            rectY = -(1395-altoV);
                        }
                        if(rectX <-(1983-anchoV)){
                            rectX = -(1983-anchoV);
                        }
                       
                    }
                    if (scalingRect) {
                        if(delta == 1){
                            escalaP = 2;
                        }else if(delta == -1){
                            
                            escalaP = 1;
                        }
                    }
                    context.beginPath();
                    context.rect(rectX, rectY, 1983, 1395);
                    context.closePath(); 
                        
                    this.addRegionEventListener("mousedown", function(){
                        var mousePos = kin.getMousePos();
                        scalingRect = true;
                        draggingRect = true;
                        draggingRectOffsetX = mousePos.x - rectX;
                        draggingRectOffsetY = mousePos.y - rectY;
                    });
                    this.addRegionEventListener("mouseup", function(){
                        draggingRect = false;
                    });
                    this.addRegionEventListener("mouseover", function(){
                        document.body.style.cursor = "pointer";
                    });
                    this.addRegionEventListener("mouseout", function(){
                        document.body.style.cursor = "default";
                    });
                
                    this.addRegionEventListener("mouseout", function(){
                        document.body.style.cursor = "default";
                    });
                    /*
                    document.getElementById('myCanvas').addEventListener('DOMMouseScroll', function (event){
                        scalingRect = true;
                      
                        if (event.wheelDelta) {
                            delta = event.wheelDelta/120; 
                 
                        } else if (event.detail) {
                            delta = -event.detail/3;
                        }
                        canvas.context.restore();
                        
                    }, false);*/
                    //});
                    
                    this.closeRegion();

               
                });
                
                
            }
            var anchoP = window.innerWidth;
            
            
            
            window.onload = function(){
              
                var anchoCanvas = document.getElementById('myCanvas').width = window.innerWidth;
                var altaCanvas = document.getElementById('myCanvas').height = window.innerHeight;
                mapa = new Image();
              
                mapa.onload = function(){
                    drawImage(anchoCanvas,altaCanvas);
                };
                mapa.src = "imagenes/mapa1.jpg";
            };
        </script>


    </body></html>